<template>
  <el-form ref="formRef" :model="form" label-width="120px" size="default">
    <el-form-item>
      <h2>
        <el-link type="warning">添加词条脚本</el-link>
      </h2>
    </el-form-item>

    <el-form-item label="机构账号：">
      <el-input v-model="form.inst_number" clearable class="input-width"></el-input>
    </el-form-item>
    <el-form-item label="机构名：">
      <el-input v-model="form.inst_name" clearable class="input-width"></el-input>
    </el-form-item>
    <el-form-item label="地址：">
      <el-input v-model="form.inst_site" clearable class="input-width"></el-input>
    </el-form-item>
    <el-form-item label="所属区：">
      <el-select v-model="form.inst_group" placeholder="请输入或选择" @change="handlerChange">
        <el-option v-for="item in form.instGroupOptions" :key="item.value" :label="item.lable" :value="item.lable">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属区id：">
      <el-input
        readonly
        v-model="form.inst_group_id"
        placeholder="请先选择所属区"
        clearable
        class="input-width"
      ></el-input>
    </el-form-item>

    <el-form-item label="机构类型：">
      <el-select v-model="form.inst_type" placeholder="请输入或选择">
        <el-option v-for="item in form.instTypeOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="reset">重置</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">生成脚本</el-button>
      <el-button type="default" @click="exportFile">导出文件</el-button>
    </el-form-item>
    <el-form-item label="脚本：">
      <el-input autosize type="textarea" v-model="form.scriptString" readonly></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from "vue";
import saveAs from "./js/FileSaver";
// do not use same name with ref
const form = reactive({
  //机构类型数组
  instTypeOptions: [
    { value: 1, label: "医院" },
    { value: 2, label: "疾控中心" },
    { value: 3, label: "科研中心" },
    { value: 4, label: "部队机构" },
    { value: 5, label: "第三方机构" },
    { value: 6, label: "冬奥机构" }
  ],
  // 所属区域
  instGroupOptions: [
    { value: "110101000000", lable: "东城区" },
    { value: "110102000000", lable: "西城区" },
    { value: "110105000000", lable: "朝阳区" },
    { value: "110106000000", lable: "丰台区" },
    { value: "110107000000", lable: "石景山区" },
    { value: "110108000000", lable: "海淀区" },
    { value: "110109000000", lable: "门头沟区" },
    { value: "110111000000", lable: "房山区" },
    { value: "110112000000", lable: "通州区" },
    { value: "110113000000", lable: "顺义区" },
    { value: "110114000000", lable: "昌平区" },
    { value: "110115000000", lable: "大兴区" },
    { value: "110116000000", lable: "怀柔区" },
    { value: "110117000000", lable: "平谷区" },
    { value: "110118000000", lable: "密云区" },
    { value: "110119000000", lable: "延庆区" },
    { value: "110121000000", lable: "河北省张家口" }
  ],
  // 机构账号
  inst_number: "",
  //   机构名字
  inst_name: "",
  //   机构地址
  inst_site: "",
  //   所属区域
  inst_group: "",
  //   所属机构id
  inst_group_id: "",
  //   机构类型
  inst_type: "",
  // 脚本
  scriptString: ""
});

const reset = () => {
  // 机构账号
  form.inst_number = "";
  //   机构名字
  form.inst_name = "";
  //   机构地址
  form.inst_site = "";
  //   所属区域
  form.inst_group = "";
  //   所属机构id
  form.inst_group_id = "";
  //   机构类型
  form.inst_type = "";
  // 脚本
  form.scriptString = "";
};
const handlerChange = (val) => {
  form.instGroupOptions.forEach((item) => {
    if (item.lable == val) {
      form.inst_group_id = item.value;
    }
  });
};
const exportFile = () => {
  let str = new Blob([form.scriptString], {
    type: "text/plain;charset=utf-8"
  });
  saveAs(str, `添加${form.inst_name}词条SQL脚本.txt`);
};

const onSubmit = () => {
  form.scriptString = `描述
MySQL新增
环境 北京政务云
数据库： MySQL
地址：192.159.107.11:3305
库名：nat_admin

添加词条：
INSERT INTO \`test_inst\` (\`inst_number\` ,\`inst_name\`, \`inst_site\`, \`longitude\`, \`latitude\` ,\`inst_group\`, \`inst_group_id\` ,\`phone\` ,\`telephone\`, \`inst_type\`) VALUES('${form.inst_number}' ,'${form.inst_name}' ,'${form.inst_site}', NULL ,NULL ,'${form.inst_group}',${form.inst_group_id},'', '',${form.inst_type});`;
};
</script>

<style>
.input-width {
  width: 500px;
}
</style>
